<template>
  <div>
    <el-row>
      <el-col :span="15">
        <el-form :model="formData"
         ref="elForm"
            class="form-body medias-html"
            label-suffix="："
         :rules="rules" label-width="160px">
         
          <el-form-item label="物料名称" prop="name">
            <el-input
              v-model="formData.name"
              autocomplete="off"
              placeholder="请输入物料名称"
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
          <!--  -->
           <el-form-item label="物料模板类型" prop="posx">
      <el-radio-group v-model="formData.cntype" size="medium">
        <el-radio
          v-for="(item, index) in templateTypeOptions"
          :key="index"
          :label="item.value"
          :disabled="item.disabled"
          >{{ item.label }}</el-radio
        >
      </el-radio-group>
    </el-form-item>

  <!-- 单独 code 代码输入框 -->
    <HtmlCode
     v-if="formData.cntype==1"
     v-on:htmlcodechange="htmlCodeChange"
     v-bind:formData="formData.content"  ></HtmlCode>

    <HtmlFloatAd v-if="formData.cntype==2"
    v-on:htmlcodechange="htmlCodeChange"
     v-bind:formData="formData.content"  ></HtmlFloatAd>
 
 <!--  -->
          <el-form-item label="目标窗口" prop="target">
            <el-radio-group v-model="formData.target" size="medium">
              <el-radio
                v-for="(item, index) in targetOptions"
                :key="index"
                :label="item.value"
                :disabled="item.disabled"
                >{{ item.label }}</el-radio
              >
            </el-radio-group>
          </el-form-item>

          <!--  -->
          <el-form-item size="large" class="form-submit-panel">
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="resetForm">关闭</el-button>
          </el-form-item>
          <!--  -->
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import HtmlCode from "../Place/HtmlCode.vue";
import HtmlFloatAd from "../Place/HtmlFloatAd.vue";

export default {
  components: { HtmlCode,HtmlFloatAd },
  props: ['mediasRow'],
  data() {
    return {
      formData: {
        id:0,
        type:"html",
        name: "",
        html: "",
        images: [],       
        linkurl: "",
        target: 1,
        trackurl: "",
        attachments: undefined,
        width:undefined,
        height:undefined,
        cntype: 1, /*模板类型*/
         content: {
           html: undefined,
           attachments: undefined,
           linkurl: undefined,
           //浮动框的参数
           posx: undefined,
              offsetX: undefined,
              offsetY:undefined,
              posy: undefined,
              winHeight: undefined,
              winWidth: undefined, 
              adpic : undefined,
              //增加一个子组件，需要把没有的参数添加到这里。
         }, //存放每个子组件的内容
      },
     
      upimages:[],
      flashpic: "", //临时图片保存
      flashpicLoading: false, //上传的loading 等待；
      loading:false,
      rules: {
        name: [
          {
            required: true,
            message: "物料名称不能为空",
            trigger: "change",
          },
        ],
        target: [
          {
            required: true,
            message: "目标窗口不能为空",
            trigger: "change",
          },
        ],
        trackurl: [],
      },
      targetOptions: [
        {
          label: "新窗口",
          value: 1,
        },
        {
          label: "原窗口",
          value: 2,
        },
      ],
      templateTypeOptions: [
        {
          label: "不使用模板",
          value: 1,
        },
        {
          label: "弹窗-浮动窗口",
          value: 2,
        },
      ],
    };
  },
    created:function() {
      if(!this.row  || !this.row.hasOwnProperty("id")){ return;}
      // 修改是不是被类型的数据不渲染
      if(this.row.type != 'html') { return; }
      // 
       // 
      if(this.row.content){        
        this.row['html'] = this.row.content.html ;         
      }
      // 
      for(var key in this.formData){
        if( this.row[key]){
            this.formData[key] = this.row[key];
        }
      }
      //附件 添加到零时上传的 图片值；
      //this.flashpic = this.formData.attachments;
      
  },
  computed:{
     row: function(){
       
       return this.mediasRow
     }
  },
  methods: {
        // 上传备用图片
    handleUploadChange(response, file, fileList){
        this.flashpic = response.data;
        this.flashpicLoading = false;
    },
    beforeUpload(file ){
      this.flashpicLoading=true;
    },
    onUploadError(err, file, fileList){
      this.flashpicLoading = false;
      this.$message({message:"上传失败", type:"error"})
    },
    //
   htmlCodeChange(d){
     for(let i in d){
       this.formData['content'][i] = d[i];
     }
     this.formData['attachments'] = d.attachments;
     this.formData['linkurl'] = d.linkurl;
     if(d.winHeight !=undefined){
       this.formData['height'] = d.winHeight
     } 
     if(d.winWidth !=undefined){
      this.formData['width'] = d.winWidth
     }
   },
    submitForm() {
           // 表单处于loading状态 
     // this.formData.attachments = this.flashpic;

      this.$refs["elForm"].validate((valid) => {

        if (!valid) return;
        this.loading = true;
        // TODO 提交表单
        // console.log(this.formData)
        //  提交数据到接口，更新和新建通过 formData.id > 0 来区别
         PlaceAPI.createMedias(this.formData).then((data)=>{
            this.loading = false;
            this.$message({ message: data.msg, type: "success" });
            // 触发关闭Drawer 侧滑层 关闭
            this.formData.id = data.value;
            // 添加成功返回 data.vaule = 物料id；
            this.$emit("onclosedrawer",{ from: 'submit',row: this.formData})
         })

      });
      
    },
    resetForm() {
       this.$emit("onclosedrawer",{ from: ''})
    },
  },
};
</script>
